<template>
  <div class="app-container">
    <el-row>
      <el-select
        v-model="institutionCode"
        placeholder="请选择"
        size="small"
        style="width: 240px" @change=""
      >
        <el-option-group
          v-for="group in bidOptions"
          :key="group.name"
          :label="group.name">
          <el-option
            v-for="item in group.bids"
            :key="item.code"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-option-group>
      </el-select>
    </el-row>

    <el-row style="padding-top: 16px;">
      <el-col :span="8">
        <el-row>
          <el-card style="height: calc(50vh - 100px)">
            <StaffPieChart v-if="show" :institution-code="institutionCode" />
          </el-card>
        </el-row>
        <el-row style="padding-top: 8px;">
          <el-card style="height: calc(50vh - 100px)">
            <StaffBarChart v-if="show" :institution-code="institutionCode" />
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="16" style="padding-left: 8px;">
        <el-row>
          <el-col :span="24">
            <el-card style="height: calc(50vh - 100px)">
              <StaffMapChart v-if="show" :institution-code="institutionCode" />
            </el-card>
          </el-col>
          <el-col :span="24" style="padding-top: 8px;">
            <el-col :span="16">
              <el-card style="height: calc(50vh - 100px)">
                <StaffBarAgeChart v-if="show" :institution-code="institutionCode" />
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card style="height: calc(50vh - 100px)">
                <StaffPieSexChart v-if="show" :institution-code="institutionCode" />
              </el-card>
            </el-col>

          </el-col>

        </el-row>

      </el-col>
    </el-row>

  </div>
</template>

<script>

  import StaffPieChart from '@/views/dashboard/site/labour/staff/PieChart';
  import StaffMapChart from '@/views/dashboard/site/labour/staff/MapChart';
  import StaffBarChart from '@/views/dashboard/site/labour/staff/BarChart';
  import StaffBarAgeChart from '@/views/dashboard/site/labour/staff/BarAgeChart';
  import StaffPieSexChart from '@/views/dashboard/site/labour/staff/PieSexChart';
  import { selectProjectBidBranch } from "@/api/project/bid";

  export default {
    name: "StaffChart",
    components: {
      StaffPieChart,
      StaffPieSexChart,
      StaffMapChart,
      StaffBarChart,
      StaffBarAgeChart
    },
    data() {
      return {
        show: false,
        institutionCode: '',
        bidOptions: [],
        sexShow: true,
      }
    },
    created() {
      this.initBidSelect();
    },
    methods: {
      /** 初始化标段下拉框 */
      initBidSelect() {
        selectProjectBidBranch().then(response => {
          this.bidOptions = response.data;
          console.log("加载标段完成");
          if (this.bidOptions.length > 0) {
            this.institutionCode = this.bidOptions[0].bids[0].code;
            this.show = true;
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
